import React, { useState } from 'react';
import './Summer.scss';
import Summer1 from '../../assets/images/Summer/1.jpg';
import Summer2 from '../../assets/images/Summer/2.jpg';
import Summer3 from '../../assets/images/Summer/3.jpg';
import Summer4 from '../../assets/images/Summer/4.jpg';
import Summer5 from '../../assets/images/Summer/5.jpg';
import Summer6 from '../../assets/images/Summer/6.jpg';
import Summer8 from '../../assets/images/Summer/8.jpg';
import Summer9 from '../../assets/images/Summer/9.jpg';
import Summer10 from '../../assets/images/Summer/10.jpg';

function Summer() {
  const [offset, setOffset] = useState(0);

  const handleNext = () => {
    if (offset > -1100) {
      setOffset(offset - 1100);
    }
  };

  const handlePrev = () => {
    if (offset < 0) {
      setOffset(offset + 1100);
    }
  };

  return (
    <div className='Summer'>
      <div className='SummerSummer'>夏天</div>
      <div className='rightALL'>查看全部</div>
      <div className='div111'></div>
      <div
        className={`arrow left ${offset === 0 ? 'hidden' : ''}`}
        onClick={handlePrev}
      >
        &lt;
      </div>
      <div
        className={`arrow right ${offset <= -1100 ? 'hidden' : ''}`}
        onClick={handleNext}
      >
        &gt;
      </div>
      <ul className='Summerul' style={{ transform: `translateX(${offset}px)` }}>
        <li><img src={Summer1} alt="" /></li>
        <li><img src={Summer2} alt="" /></li>
        <li><img src={Summer3} alt="" /></li>
        <li><img src={Summer4} alt="" /></li>
        <li><img src={Summer5} alt="" /></li>
        <li><img src={Summer6} alt="" /></li>
        <li><img src={Summer8} alt="" /></li>
        <li><img src={Summer9} alt="" /></li>
        <li><img src={Summer10} alt="" /></li>
      </ul>
    </div>
  );
}

export default Summer;
